.web{
    width: 100%;
    height: 100%;
//  background:#000000;
}
.clear{
    content: '';
    display: block;
    clear: both;
}
.nav_tup{
    img:hover{
        animation:lightSpeedIn 1s infinite;
    }

    @keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    transform: none;
    opacity: 1;
  }
}
}
.header-top{
    width: 1063px;
    height: 117px;                  
    margin: 0 auto;
    background: #000000;
.logo{
    margin-left: 42px;
    vertical-align: middle;
    padding-top: 41px;
    float: left;
}
.header-nav{
    height: 22px;
    width: 514px;
    margin-top: 54px;
    margin-right: 48px;
    
    ul li{
    float: left;
    margin-right: 34px;    
    color: white;   
}
} 
}

.header-middle{
   width: 1063px;
   height: 215px;
   background: black;
   margin: 0 auto;
   .header-middle-left{
       width: 386px;
       height: 215px;
   }
}

.header-search{
     width: 1063px;
     height: 64px;
     margin: 0 auto;
}

 .recommend{
        height: 271px;
        width: 1063px;
        margin: 0 auto;
        h1{
            color: white;
            margin-left: 44px;
            line-height: 82px;
        }
        ul{
             margin-left: 44px;
        }
        ul li{
            margin-right: 20px;
            float: left;
        }
    } 
    
section{
    height: 1374px;
    width: 1063px;
    margin: 0 auto;
    background:#000000;
    .section-left{
        width: 155px;
        height: 1374px;
        float: left;
        margin-left:44px;
       
       .top ul{
           width: 155px;
           height: 130px;
       }
       .top li{
           width: 155px;
           height: 42px;
           background:#242424;
           margin-top: 4px;
           line-height: 42px;
           text-align: center;
       }
       
       .top li:hover{
           background: black;
            >a{
                color: white;
            }
       
       }
       
       
       .top li a{
          color: #747373;
       }
       h1{
           padding-top: 14px;
           font-size: 12px;
           line-height: 30px;
          color: #0DAFD1;
          text-align: center;
       }
       p{
//         padding-top: 24px;
           line-height: 24px;
           font-size:12px;
           color: #7C7C7C;
       }      
       .middle{
           margin-top: 8px;
           width: 155px;
           height: 480px;
           background:#242424;
       }
       .middle-list{
           width: 145px;
           height: 406px;
           margin-left: 10px;
           border-top: 1px solid #444444;
           border-bottom: 1px solid #444444;
           p{
               text-align: center;
           }
           img{
               border-radius: 50%;
                animation:fadeIn 3s infinite;
            }
           @keyframes fadeIn {
                from {
                    transform: rotate(0deg);
                }
                
                to {
                    transform: rotate(360deg);
                  }
                }
        }
        .middle-more{
            width: 120px;
            height: 20px;
            margin-top: 10px;
//          padding-top: 12px;
            text-align: right;
//          background: red;
            margin-left: 20px;
        }
        a{
           font-size:14px;
           color: #0DAFD1;
       }
       .middle li{
           margin-top: 15px;
           letter-spacing: 0px;           
           float: left;
           margin-left: 16px;
       }
       .middle li a{
           color: white;
       }
        
        
        
        
        .bottom{
            margin-top: 7px;
            width: 155px;
            height: 566px;
            background:#242424;
//          padding-top: 43px;
            h1{
               font-size: 14px;
               color: #0DAFD1;
               margin-top: 10px;
//             line-height: 14px;  
            }
           
               
        }
        .bottom-list{
//          padding-top: 13px;
            width: 145px;
            height: 520px;
            background:#242424;
            border-top: 1px solid #444444;
            margin-left: 10px;
             img:hover{
                animation:swing 1s infinite;
            }
            @keyframes swing {
                  20% {
                    transform: rotate3d(0, 0, 1, 15deg);
                  }
                
                  40% {
                    transform: rotate3d(0, 0, 1, -10deg);
                  }
                
                  60% {
                    transform: rotate3d(0, 0, 1, 5deg);
                  }
                
                  80% {
                    transform: rotate3d(0, 0, 1, -5deg);
                  }
                
                  to {
                    transform: rotate3d(0, 0, 1, 0deg);
                  }
                }
             li{
                width: 155px;
                height: 59px;
                margin-top: 20px;
//              float: left;
            }
            img{
                float: left;
            }
            div{
               
//              line-height: 25px;
                float: left;
                margin-left:23px ;
                p{
                    line-height: 20px;
//                  margin-top: 15px;
                }
            }
            
            .bottom-browse{
                width: 155px;
                height: 54px;
              
               margin-left: -10px;
               p{
                   text-align: center;
               }
            }
            .today{
             
                width: 50px;
                height: 54px;
                float: left;
               
            }
            .total{
               
                width: 53px;
                height: 54px;
                float: right;
            }
            .bottom-more{
                width: 140px;
                height: 48px;
                
                margin: 0 auto;
                border-top: 1px solid #444444;
                border-bottom: 1px solid #444444;
                margin-left: 5px;
                margin-top: 10px;
                a{
                    color: #0DAFD1;
                    font-size: 14px;
                    margin-left: 80px;
                    line-height: 48px;     
                }
            }
        }
        
    }
    .section-right{
        margin-top: 5px;
        width: 808px;
        height: 1354px;
        float:right;
        margin-right: 48px;
        background: white;
        .a{
            width: 116px;
            height: 15px;
            margin-top: 10px;
            margin-left: 700px;
            a{
            color: #999797;
            font-size: 12px;
           }
        }
       
        .section-right-top{
            width: 764px;
            height: 72px;

            margin-left: 21px;
         
            h1{
                width: 189px;
                height: 42px;
                color: #0DAFD1;
                
                float: left;
                margin-top: 23px;
        
            }
            h4{
                font-size: 14px;
                width: 78px;
                height: 21px;
                color: #7C7B7B;
                float: left;
                margin-top: 39px;
                margin-left:-50px;
            }
            input{
                width: 117px;
                height: 27px;
                background: #0DAFD2;
                color: white;
                float: right;
                margin-top: 21px;
            }
        }
        .section-right-middle{
            width: 753px;
            height: 62px;
            border: 1px solid #F0F0F0;
            margin-left: 21px;
            line-height: 62px;
          
            input{
                width: 114px;
                height: 24px;
                margin-top: -11px;
                label{
                    
                }
            }
            
            #select1{
                width: 176px;
                height: 23px;
                border: 1px gray solid;
            }
            #select2{
                width: 227px;
                height: 23px;
                border: 1px gray solid;
            }
            label{
//             line-height: 116px;
                height: 8px;
               color: blue;
            }
           
        }
         .section-right-bottom{
             margin-top: 10px;
             
             .item1{
                    margin-top: 15px;
                    margin-left: 21px;
                    width: 764px;
                    height: 169px;
                    border: 1px #F0F0F0 solid;
//                  a{
//                      color: ##999797;
//                      font-size: 12px;
//                  }
                .img{
                    width: 303px;
                    height: 165px;
                    float: left;
                }
                .detail{
                    margin-left: 10px;
                    width: 444px;
                    height: 160px;
                    float: left;
                   
                    .p{
                        width: 454px;
                        height: 62px;
                        p{
                            color: #636262;
                            font-size: 18px;
                            color: #636262;
                            line-height: 26px; 
                        }
                        
                        
                       
                    }
                    .zt{
                            width: 181px;
                            height: 19px;
                            margin-left: 270px;
                            h3{
                                color:#B2B0B0;
                                font-size: 12px;
                               
                            }
                            h4{
                                color:#00AB5B;
                                font-size: 12px;
                                margin-left: 126px;
                                line-height: 55px;
                            }
                            a{
                                color: #7C7B7B;
                                font-size: 12px;
                                margin-left: 22px;
                            }
                        }
            }                  
            
         }
        
    }
}
}        
